<template>
  <div class="movieTitle">评论管理</div>
  <el-table :data="pageData.discusslist.slice((pageData.current-1)*pageData.pagesize,pageData.current*pageData.pagesize)" style="width: 100%">
     <el-table-column label="序号" > <template  #default="scope"><span>{{(pageData.current - 1) * pageData.pagesize + scope.$index + 1}}</span></template></el-table-column> 
    <el-table-column prop="did" label="评论ID" width="150" />
    <el-table-column prop="chinese_name" label="影片名称" width="150" />
    <el-table-column label="用户头像" width="150" >
        <template v-slot="scope">
            <img :src="scope.row.avatar" style="width:50px">
        </template>
    </el-table-column>
    <el-table-column prop="account" label="用户账号" width="150"  show-overflow-tooltip/>
    <el-table-column prop="name" label="用户名称" width="150" show-overflow-tooltip/>
    <el-table-column prop="content" label="评论内容" width="300" show-overflow-tooltip/>
        <el-table-column
      :formatter="formatterTime"
      prop="distime"
      label="创建时间"
      width="200"
    />
    <el-table-column fixed="right" width="110">
      <template #default="scope">
        <el-button
          type="success"
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          ><el-icon><edit /></el-icon
        ></el-button>
        <el-button
          type="danger"
          size="small"
          @click="handleDelete(scope.$index, scope.row)"
          ><el-icon><delete /></el-icon
        ></el-button>
      </template>
    </el-table-column>
  </el-table>

    <!--分页 -->
    <el-pagination
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"
    :current-page="pageData.current"
    layout="prev, pager, next,total,jumper"
    :total="pageData.total"
    :page-size="pageData.pagesize"
  />
</template>

<script lang="ts">
import { Delete, Refresh, Edit, Plus } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, inject, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
export default {
  components: { Delete, Refresh, Edit, Plus },
  setup() {
    onMounted(() => {
      handleRefs();
    });
    const reload=inject("reload",() => {})
    const store=useStore();
    const handleClick = () => {
      console.log("click");
    };
             /**分页 */
    const pageData=reactive({
       current:1,//当前页
       pagesize:10,// 当前页显示多少条
       discusslist:ref([]),
       total:0  //总数据
     })
     const arr =ref([])
    const temp =ref([])
    pageData.discusslist=computed({
          get:()=>{ return temp.value},
          set:(newvalue)=>{ temp.value=newvalue}
        }) as never;
    /**界面刷新 */
    const handleRefs = () => {
      store.dispatch("SET_DISCUSSINFO").then(()=>{
      arr.value=store.state.discuss.discussInfo
      temp.value=arr.value
      pageData.total = computed(()=>{return store.state.discuss.discussInfo.length}) as never;
      })
     
    };
   
    const handleRef = async () => {
    };
  
    const handleSizeChange=(value:any)=>{
      pageData.pagesize=value;
      pageData.discusslist=[];
      handleRefs();

    }   
    const handleCurrentChange=(value:any)=>{
      pageData.current=value;
      pageData.discusslist=[];
      handleRefs();
    }
    const formatterTime = (row: any, column: any) => {
      let date = new Date(row[column.property]);
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    };
    const handleDelete=(index:any,row:any)=>{
        console.log(row.did);
        store.dispatch("SET_DELETEDISCUSS",{did:row.did})
        handleRefs();
    }
    return {
        handleDelete,
      pageData,
      handleSizeChange,
      handleCurrentChange,
      Delete,
      Edit,
      handleClick,
      handleRefs,
      handleRef,
      formatterTime
    };
  },
};
</script>
<style scoped>
.movieTitle {
  font-size: 1.5rem;
  margin: 20px 0 10px 0;
}
.introduction{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;        
}
.el-table .cell {
  padding: 5px 12px;
}
.el-pagination{
  padding: 50px 10px;
  margin-left: 35rem;
}
</style>
